<template>
	<view class="page-bodys bg-white">
		<swiper :autoplay="autoplay" :circular="true" :interval="interval" :style="{height: swiperHeight + 'rpx'}" @change="swiperChange" :current="currentIndex" class="swiper-box" :duration="duration">
			<swiper-item class="swiper-menu" v-for="(item,index) in scrollList" :key="index">
				<view class="swiper-item">
					<image :src="item.imgurl" mode="aspectFill"></image>
					<view class="swiper-name">{{item.name}}</view>
				</view>
			</swiper-item>
		</swiper>
		
		<scroll-view class="scroll-center-box" :style="{paddingTop: thumbnailPadding + 'rpx',paddingBottom: thumbnailPadding + 'rpx'}" scroll-x="true"
			:scroll-left="scroll_left">
			<view :style="{width:thumbnailWidth + 'rpx',height:thumbnailHeight + 'rpx'}" @click="getList(titem,tindex)" class="swiper-image" v-for="(titem,tindex) in scrollList" :key="tindex">
				<image :style="tindex == currentIndex && thumbBorder?isThumbBorder:''" :src="titem.imgurl" mode="aspectFill"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			//需要遍历的数组
			scrollList: {
				type: Array,
				default: []
			},
			//默认选中的tabbar 默认第一个
			current: {
				type: Number,
				default: 0
			},
			//轮播容器高度
			swiperHeight:{
				type: Number,
				default: 336
			},
			//缩略图容器上下内边距
			thumbnailPadding:{
				type: Number,
				default: 0
			},
			//缩略图宽度
			thumbnailWidth:{
				type: Number,
				default: 200
			},
			//缩略图高度
			thumbnailHeight:{
				type: Number,
				default: 160
			},
			//是否自动切换
			autoplay:{
				type: Boolean,
				default: false
			},
			//自动切换间隔时长
			interval:{
				type: Number,
				default: 3000
			},
			//滑动动画时长
			duration:{
				type: Number,
				default: 500
			},
			//缩略图边框颜色
			thumbBorderColor:{
				type: String,
				default: ''
			},
			//缩略图边框宽度
			thumbBorderWidth:{
				type: Number,
				default: 2
			},
			//是否需要边框
			thumbBorder:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentIndex: this.current,
				scrollWidth: 0,
				scroll_left: 0,
			}
		},
		created() {
			this.$nextTick(() => {
				this.getScrollW();
				this.getScrollLeft(this.currentIndex);
			});
		},
		computed:{
			isThumbBorder(){
				return `border: ${this.thumbBorderWidth}px solid ${this.thumbBorderColor} #FFB300`
			}
		},
		methods: {
			swiperChange(e){
				this.currentIndex = e.detail.current;
				this.getScrollW();
				this.$nextTick(() => {
					this.scroll_left = 0;
					this.getScrollLeft(this.currentIndex);
				})
			},
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.in(this).select('.scroll-center-box').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.scrollWidth = data.width;
				}).exec();
				query.in(this).selectAll('.swiper-image').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.scrollList[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.scrollList[i].width = data[i].width;
					}
				}).exec();
			},
			getList(item, index) {
				this.currentIndex = index;
				this.getScrollW();
				this.$nextTick(() => {
					this.scroll_left = 0;
					this.getScrollLeft(index);
				})
			},
			getScrollLeft(index) {
				for (let i = 0; i < index + 1; i++) {
					this.scroll_left += this.scrollList[i].width;
				}
				this.scroll_left = this.scroll_left - (this.scrollWidth / 2) - this.thumbnailWidth/3.6;
			}
		}
	}
</script>

<style lang="scss">
	.uni-scroll-view, .uni-scroll-view-content{
		display: flex;
		justify-content: space-between;
	}
	.swiper-box{
		width: 100%;
		height: 336rpx;
		.swiper-menu{
			.swiper-item{
				height: 100%;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
				.swiper-name{
					position: absolute;
					left: 16rpx;
					bottom: 16rpx;
					color: white;
					font-size: 28rpx;
					padding: 4rpx 16rpx;
					border-radius: 24rpx;
					background: #00000094;
				}
			}
		}
		
	}
	
	.scroll-center-box {
		width: 100%;
		white-space: nowrap;
		.swiper-image{
			display: inline-block;
			image{
				box-sizing: border-box;
				height: 100%;
				width: 100%;
				border-radius: 16rpx;
			}
		}
	}
	
	.border-red{
		border: 2px solid red;
	}
</style>